<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="100px"
      v-loading="formLoading"
    > 
      <el-form-item label="项目名称" prop="projectName">
        <el-input v-model="formData.projectName" placeholder="请输入抽取轮次" disabled />
      </el-form-item>
      <el-form-item label="专家库" prop="expertMajor">
        <el-select  v-model="formData.extractMajor" @change="getExpertList" >
          <el-option
              v-for="item in majorList"
              :key="item.dataName"
              :label="item.dataName"
              :value="item.dataName"/>
          </el-select>
      </el-form-item>
      <el-form-item label="抽取轮次" prop="extractBatchNum">
        <el-input type='number' 
        v-model="formData.extractBatchNum" 
        placeholder="请输入抽取轮次" 
        onkeyup="value=value.replace(/[^\d]/g,'')"/>
      </el-form-item>
      <el-form-item label="抽取人数" prop="extractExpertNum">
        <el-input type='number' 
        v-model="formData.extractExpertNum" 
        placeholder="请输入抽取人数"
        onkeyup="value=value.replace(/[^\d]/g,'')" />
      </el-form-item>
       <el-form-item label="固定专家人选" prop="expertList" v-hasPermi="['expert:project-info:expert']">
          <el-select v-model="formData.expertIdList" multiple filterable placeholder="请选择">
            <el-option
              v-for="item in expertDatas"
              :key="item.id"
              :label="item.expertUnit+'：'+item.expertName+'('+item.expertIden+')'"
              :value="item.id"/>
          </el-select>
       </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="formData.remark" placeholder="请输入备注" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import { ExtractInfoApi, ExtractInfoVO } from '@/api/expert/extractinfo'
import { ProjectInfoVO } from '@/api/expert/projectinfo'
import { InfoApi, InfoVO } from '@/api/expert/expertinfo'

import {BasedataApi,BasedataVO} from '@/api/expert/expertbasedata'
/** 抽签结果 表单 */
defineOptions({ name: 'ExtractInfoForm' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const majorList = ref<BasedataVO[]>([])
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const expertDatas=ref<InfoVO[]>([])
const formData = ref({
  extractBatchNum: '',
  extractExpertNum: '',
  expertId: '',
  projectId: '',
  expertName: '',
  expertUnit: '',
  expertPhone: '',
  expertMajor: '',
  extractMajor:'',
  expertTitle: '',
  expertIden: '',
  projectName: '',
  projectUnit: '',
  projectContacts: '',
  projectPhone: '',
  projectMajor: '',
  projectTime: new Date,
  projectAddress: '',
  projectAmount: '',
  projectTendersTime: new Date,
  remark: '',
  expertIdList:[]
})
const formRules = reactive({
  extractBatchNum: [{ required: true, message: '抽取轮次不能为空', trigger: 'blur' }],
  extractExpertNum: [{ required: true, message: '抽取人数不能为空', trigger: 'blur' }],
  projectName: [{ required: true, message: '项目不能为空', trigger: 'blur' }],
})
const formRef = ref() // 表单 Ref

/** 打开弹窗 */
const open = async (type:string, ob: ProjectInfoVO) => {
  dialogVisible.value = true
  dialogTitle.value = t('action.' + type)
  formType.value = type
  resetForm()
  getMajorList()
  // 修改时，设置数据
  if (ob) {
    formLoading.value = true
    try {
      formData.value.projectName = ob.projectName
      formData.value.projectId=ob.id
      formData.value.extractMajor=ob.projectMajor //抽取时专业
      formData.value.projectUnit=ob.projectUnit // 项目单位
      formData.value.projectContacts=ob.projectContacts // 联系人
      formData.value.projectPhone=ob.projectPhone // 联系人电话
      formData.value.projectMajor=ob.projectMajor // 专业
      formData.value.projectTime=ob.projectTime // 项目时间
      formData.value.projectAddress=ob.projectAddress // 项目地址
      formData.value.projectAmount=ob.projectAmount // 项目金额
      formData.value.projectTendersTime=ob.projectTendersTime// 项目招标时间
    } finally {
      formLoading.value = false
      getExpertList()
    }
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

const getExpertList =async ()=>{
  expertDatas.value = await InfoApi.getExpertByMajor(formData.value.extractMajor)
}
const getMajorList =async ()=>{
  majorList.value = await BasedataApi.getMajorList()
}
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  // 校验表单
  await formRef.value.validate()
  // 提交请求
  formLoading.value = true
  try {
    const data = formData.value as unknown as ExtractInfoVO
    // if (formType.value === 'create') {
      await ExtractInfoApi.createExtractInfo(data)
      message.success(t('common.createSuccess'))
    // } else {
    //   await ExtractInfoApi.updateExtractInfo(data)
    //   message.success(t('common.updateSuccess'))
    // }
    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {

    extractBatchNum: '',
    extractExpertNum: '',
    expertId: '',
    projectId: '',
    expertName: '',
    expertUnit: '',
    expertPhone: '',
    expertMajor: '',
    extractMajor:'',
    expertTitle: '',
    expertIden: '',
    projectName: '',
    projectUnit: '',
    projectContacts: '',
    projectPhone: '',
    projectMajor: '',
    projectTime: new Date,
    projectAddress: '',
    projectAmount: '',
    projectTendersTime: new Date,
    remark: '',
    expertIdList:[]
  }
  formRef.value?.resetFields()
}
</script>